import { FC, Fragment, ReactNode } from 'react';
import { Modal, ConfigProvider } from 'antd';
import { LikeOutlined, VideoCameraOutlined, UsergroupAddOutlined } from '@ant-design/icons';
import LoginForm from './component/LoginForm';
import { themeForLoginWin } from './component/LoginForm/theme';
import './index.less';

interface LoginComponentT {
  isShowLoginWin: boolean;
  close: () => void;
}

const messages: Array<{ icon: ReactNode; text: string | ReactNode }> = [
  { icon: <LikeOutlined />, text: '点赞评论随心发' },
  { icon: <VideoCameraOutlined />, text: '直播间畅聊打赏' },
  { icon: <UsergroupAddOutlined />, text: '朋友视频一键览' },
];

const LoginComponent: FC<LoginComponentT> = (props) => {
  const { isShowLoginWin, close } = props;
  return (
    <Fragment>
      <ConfigProvider theme={themeForLoginWin}>
        <Modal open={isShowLoginWin} footer={null} wrapClassName="model-body" onCancel={close}>
          <div className="title font-sans text-2xl font-medium text-center">登录后免费畅享高清视频</div>
          <div className="messages flex justify-center">
            {messages.map((item, index) => (
              <div className="message mx-2 mt-4" key={index}>
                {item.icon}
                <span>{item.text}</span>
              </div>
            ))}
          </div>
          <LoginForm></LoginForm>
        </Modal>
      </ConfigProvider>
    </Fragment>
  );
};

export default LoginComponent;
